<template>
  <view class="balance">
    <view class="top"></view>
    <view class="info">
      <view class="title">可用余额</view>
      <view class="line space-between">
        <view class="num">{{balanceData.now_money||0}}</view>
        <view class="btn" @click="$uniApi.to(`/pages/my/withdraw?brokerage=${balanceData.brokerage}&now_money=${balanceData.now_money}&jmoney=${balanceData.jmoney}`)">提现</view>
      </view>
      <view class="line space-between">
        <view>待提现：{{balanceData.now_money||0}}
		<!-- {{balanceData.brokerage||0}} -->
		</view>
        <view class="btn" @click="recharge">充值</view>
      </view>
    </view>
    <view class="tips flex">
		<view :style="{'color':recordType==1?'#547cf2':''}" @click="recordType=1; getInitList();">余额记录</view>
		<view :style="{'color':recordType==2?'#547cf2':'normal'}" @click="recordType=2; getInitList();" style="margin-left: 20rpx;">提现记录</view>
	</view>
    <view class="list">
      <scroll-view  class="sl-sv" scroll-y="true" @scrolltolower="scrolower">
		  <view v-if="recordType==1">
		  	<view v-for="(item, index) in historyList" :key="index">
		  		<view class="month-title">
		  			{{item.money}}
		  		</view>
				<view class="item"  v-for="(it,ind) in item.list" :key="ind">
					<view class="ititle space-between">
					  <view class="name">{{ it.title }}</view>
					  <view
						class="number"
						:style="{ color:it.pm==0 ? '#999' : '' }"
						>{{ it.number }}</view
					  >
					</view>
					<view class="tip space-between">
					  <view class="ttext">{{ it.tip }}</view>
					  <view class="time">{{ it.add_time }}</view>
					</view>
				</view>
		  	</view>
		  </view>
		  <view v-if="recordType==2">
		  	<view class="item"  v-for="(it,ind) in withdrawRecords" :key="ind">
		  		<view class="ititle space-between">
		  		  <view class="name">{{ it.status==0?'审核中':it.status==1?'已提现':it.status==-1?'未通过':'暂无状态' }}</view>
		  		  <view
		  			class="number"
		  			>{{ it.extract_price }}</view
		  		  >
		  		</view>
		  		<view class="tip space-between">
		  		  <view class="ttext">{{ it.status==-1?it.fail_msg:'' }}</view>
		  		  <view class="time">{{ it.add_time }}</view>
		  		</view>
		  	</view>
		  </view>
      </scroll-view>
	</view>
    <!-- 充值 -->
    <u-popup
      mode="center"
      :show="popupShow"
      :round="10"
      :closeable="true"
      :customStyle="cstyle"
      :safeAreaInsetBottom="false"
      @close="close"
    >
      <view class="content">
        <view class="ptitle">充值金额</view>
        <view class="pcontet">
          <u-input
            placeholder="¥ 输入充值金额"
            border="none"
            v-model="inputValue"
          ></u-input>
        </view>
		<view class="have-question center">
			<view @click="goUrl('/pages/my/about')">
				遇到问题
			</view>
			<u-icon @click="goUrl('/pages/my/about')" name="question-circle"></u-icon>
		</view>
        <!-- placeholderStyle="{'font-size': '24rpx';
	'color':' #999999'}" -->
        <view class="pbtn" @click="topUp">确定</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 弹框样式
      cstyle: {
        // width: "554rpx",
        width: "80vw !important",
      },
      // 充值金额
      inputValue: "",
      popupShow: false,
      // 列表
      historyList: [],
	  // 提现记录
	  withdrawRecords:[],
	  // 余额信息
	  balanceData:'',
	  recordType:1
    };
  },
  onShow() {
	this.getInitList();
	this.getBalanceData();
  },
  onLoad(options) {
  	if(options.recordType){
		this.recordType = options.recordType;
	}
  },
  methods: {
	getInitList(){
		if(this.recordType==1){
			this.getHistoryList();
		}else if(this.recordType==2){
			this.getwithdrawList();
		}
	},
	// 路由跳转
	goUrl(url){
		uni.navigateTo({
			url:url
		})
	},
    // 触底事件
    scrolower() {},
    // 充值
    recharge() {
      this.popupShow = true;
    },
    // 弹框关闭
    close() {
      this.popupShow = false;
    },
	getBalanceData(){
		this.$api.post({
		  url: "/ebapi/user_api/balance_info",
		  success: (res) => {
			this.balanceData = res;
		  },
		})	
	},
	getwithdrawList(){
		this.$api.post({
		  url: "/ebapi/user_api/extract",
		  success: (res) => {
			this.withdrawRecords = res;
		  },
		})	
	},
	getHistoryList(){
		this.$api.post({
		  url: "/ebapi/user_api/get_user_bill_list",
		  success: (res) => {
			this.historyList = res;
		  },
	    })	
	},
	topUp(){
		console.log(this.inputValue,"inputValue");
		this.$api.post({
		  url: "/ebapi/user_api/user_wechat_recharge",
		  data:{
			price:this.inputValue
		  },
		  success: (res) => {
			uni.requestPayment({
				"timeStamp": res.timestamp,
				"nonceStr": res.nonceStr,  
				"package": res.package,  
				"signType": res.signType,  
				"paySign": res.paySign,
				success: (e) => {
					console.log(222)
					this.paySuccess(res.order_id);
				},
				fail: (e) => {
					console.log(11111)
					// content: "支付失败,原因为: " + e.errMsg,
					uni.showModal({
						content: "支付失败",
						showCancel: false
					})
				}
			})
			console.log(res,"res")
		  },
		})	
	},
	paySuccess(id){
		console.log(id,'id');
		this.$api.get({
		    url: "/ebapi/notify/rechargeNotify",
		    data: {
				orderId: id
			},
			success:(res)=>{
				uni.showToast({
					title:"充值成功！",
					icon:"none"
				})
				this.popupShow = false;
				this.getHistoryList();
				this.getBalanceData();
				console.log(res,"支付成功了")
			}
		})
	}
  },
};
</script>

<style lang="scss">
page {
  padding: 0;
}

.balance {
  .top {
    background-color: #2354e3;
    height: 200rpx;
  }

  .info {
    width: 702rpx;
    height: 262rpx;
    border-radius: 20rpx;
    background: linear-gradient(270deg, #2354e3 0%, #547cf2 100%);
    box-shadow: 0rpx 2rpx 10rpx 1rpx rgba(0, 0, 0, 0.08);
    opacity: 1;
    padding: 30rpx;
    margin: 0 24rpx;
    margin-top: -131rpx;
    color: #ffffff;

    .line {
      margin-top: 20rpx;

      .num {
        font-size: 60rpx;
        font-weight: bold;
      }

      .btn {
        padding: 11rpx 35rpx;
        border: 1px solid #ffffff;
        border-radius: 25rpx;
      }
    }
  }

  .tips {
    margin: 40rpx 24rpx 30rpx;
    font-size: $uni-text-size-title;
  }

  .list {
    margin: 20rpx 24rpx;

    .sl-sv {
      height: 65vh;
	  .month-title{
		margin: 15rpx 0 25rpx 0;
		font-size: 36rpx;
	   }
      .item {
        width: 702rpx;
        height: 152rpx;
        background: #ffffff;
        box-shadow: 0rpx 2rpx 10rpx 1rpx rgba(0, 0, 0, 0.08);
        border-radius: 16rpx;
        opacity: 1;
        padding: 40rpx 30rpx;
        margin-bottom: 20rpx;

        .ititle {
          font-weight: bold;
          font-size: $uni-text-size-title;
        }

        .tip {
          margin-top: 20rpx;
          color: #999999;
        }
      }
    }
  }

  .content {
    .ptitle {
      font-size: 32rpx;
      font-weight: bold;
      text-align: center;
      margin-top: 80rpx;
    }

    .pcontet {
      margin: 130rpx 90rpx 40rpx 90rpx;
      padding-bottom: 20rpx;
      border-bottom: 1px solid #707070;
    }
	.have-question{
		margin-bottom: 90rpx;
	}

    .pbtn {
      height: 70rpx;
      line-height: 70rpx;
      text-align: center;
      color: #ffffff;
      font-size: $uni-text-size-title;
      padding: 0 85rpx;
      background-color: $uni-color-main;
      border-radius: 20rpx;
	  margin: 0 32rpx 32rpx 32rpx;
    }
  }
}
</style>
